<template>
  <div>
    <el-row>
      <div>
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="$router.go(-1)">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">新增试题</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-row>
    <div :style="{height: CONST.WORKSPACE_HEIGHT - 100 + 'px'}"
         style="width: 59%; padding: 3px; display: inline-block; overflow-x: hidden; float: left;">
      <h3 style="color: green">编辑区</h3>
      <div style="margin-top: 10px">
        <div style="font-weight: bold;font-size: 18px">
          <span>关联大纲:</span>
        </div>
        <div style="margin: 10px">
          <el-cascader
            v-model="exerciseGroup.examDetailIdArray"
            :options="options"
            :props="cascadeProps"
            clearable
            filterable
            placeholder="请选择"
            size="small"
            style="width: 100%;margin-top: 10px"></el-cascader>
        </div>
      </div>
      <div>题型:</div>
      <div v-for="item in CONST.EXERCISE_GROUP_ROLE_ARRAY"
           style="display: inline-block; margin-left: 20px; ">
        <el-radio v-model="exerciseGroup.role" @change="resetExerciseGroup"
                  :label="item">{{ item }}
        </el-radio>
      </div>
      <EditExerciseEntry1 v-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A1"/>
      <EditExerciseEntryB v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_B"/>
      <EditExerciseEntry3 v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A3
                            || exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_CASE"/>
    </div>

    <div :style="{height: CONST.WORKSPACE_HEIGHT - 100 + 'px'}"
         style="width: 39%; padding: 3px; display: inline-block; overflow-x: hidden; float: left">
      <h3 style="color: green">预览区</h3>
      <div :style="{minHeight: CONST.WORKSPACE_HEIGHT - 170 + 'px'}"
           style="background-color: antiquewhite; ">
        <div style="color:#666; display: inline-block; ">题型:</div>
        <div style="display: inline-block; ">{{ exerciseGroup.role }}</div>
        <PreviewExerciseEntry1 :exerciseGroup="exerciseGroup" v-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A1"/>
        <PreviewExerciseEntryB :exerciseGroup="exerciseGroup" v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_B"/>
        <PreviewExerciseEntry3 :exerciseGroup="exerciseGroup" v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A3
                            || exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_CASE"/>
      </div>
    </div>

    <div style="float: right">
      <el-button type="primary" style="margin: 10px; " size="small" @click="updateExerciseGroup">保存</el-button>
    </div>
  </div>
</template>

<script>
  import EditExerciseEntry1 from "../exerciseBook/EditExerciseEntry1";
  import PreviewExerciseEntry1 from "../exerciseBook/PreviewExerciseEntry1";
  import PreviewExerciseEntryB from "../exerciseBook/PreviewExerciseEntryB";
  import EditExerciseEntryB from "../exerciseBook/EditExerciseEntryB";
  import EditExerciseEntry3 from "../exerciseBook/EditExerciseEntry3";
  import PreviewExerciseEntry3 from "../exerciseBook/PreviewExerciseEntry3";
  import {mapState} from "vuex";
  export default {
    name: "CreateExerciseGroupLib",
    components: {
      EditExerciseEntry1,
      EditExerciseEntry3,
      EditExerciseEntryB,
      PreviewExerciseEntry1,
      PreviewExerciseEntry3,
      PreviewExerciseEntryB
    },
    data() {
      return {
        cascadeProps: {value: 'id', label: 'name', multiple: true, checkStrictly: true, emitPath: false},
        options: []
      }
    },
    computed: {
      ...mapState(['exerciseGroup'])
    },
    methods: {
      resetExerciseGroup(role) {
        let exerciseGroup = {
          id: UTIL.generateSfId(),
          role,
          libFlag: true,
          exerciseEntryList: [{
            id: UTIL.generateSfId(),
            choiceArray: [],
          }],
        }
        this.$store.commit('setExerciseGroup', exerciseGroup)
      },
      updateExerciseGroup() {
        // 整理选项;
        for (let exerciseEntry of this.exerciseGroup.exerciseEntryList) {
          for (let i = 0; i < exerciseEntry.choiceArray.length; i++) {
            let choice = exerciseEntry.choiceArray[i]
            let tempDiv = document.createElement('div');
            tempDiv.innerHTML = choice
            if (tempDiv.getElementsByTagName('p').length === 0) {
              exerciseEntry.choiceArray[i] = '<p>' + choice + '</p>'
            }
          }
        }
        this.axios.post('pmph/action/exerciseLib/saveOrUpdateExerciseGroupLib', this.exerciseGroup)
          .then(() => this.$router.go(-1))
      },
    },
    created() {
      this.resetExerciseGroup(CONST.EXERCISE_GROUP_ROLE_A1)
      if (UTIL.isNotEmpty(this.$route.query.examDetailId)) {
        this.exerciseGroup.examDetailIdArray = this.$route.query.examDetailId.split(',')
      }
      // 查询大纲
      this.axios.get('/pmph/action/examBook/selectAllOutlineTree', {}).then((response) => {
        this.options = response.data
      })
    }
  }
</script>

<style scoped>

</style>
